<template>
  <section style="width:1000px;margin:20px auto" class="contianer">
    <el-row :gutter="20" type="flex" justify="content">
      <el-col :span="7">
        <div class="post_left">
          <CityList :data="citiesList" @handlePostsList="handlePostsList" />
        </div>
      </el-col>

      <el-col :span="17">
        <div class="post_right">
          <!-- 搜索框 -->
          <div class="search">
            <input v-model="searchText" type="text" placeholder="请输入你想去的地方，比如：'广州'" />
            <i class="el-icon-search" @click="handlePostsList"></i>
          </div>
          <!-- 推荐 -->
          <div class="text">
            推荐：
            <a
              href="javascript:void(0)"
              v-for="(item,index) in recommend"
              :key="index"
              @click="handlePostsList(item)"
            >{{item}}</a>
          </div>
          <!-- 推荐攻略标题 -->
          <div class="title">
            <div class="recommend">
              <h2>推荐攻略</h2>
            </div>
            <div class="btn" @click="$router.push('/post/addPost')">
              <i class="el-icon-edit"></i>
              写游记
            </div>
          </div>

          <!-- 文章列表 -->
          <PostList :data="postsList" />
          <!-- 分页 -->
          <el-row type="flex" justify="center" style="margin-top:10px;">
            <!-- size-change：切换条数时候触发 -->
            <!-- current-change：选择页数时候触发 -->
            <!-- current-page: 当前页数 -->
            <!-- page-size：当前条数 -->
            <!-- total：总条数 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageIndex"
              :page-sizes="[3,5, 10, 15]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="postsData.total"
            ></el-pagination>
          </el-row>
          <!-- 调用计算属性的postsList，让他有初始值 -->
          <span v-show="false">{{postsList}}</span>
        </div>
      </el-col>
    </el-row>
  </section>
</template>

<script>
import CityList from "@/components/post/cityList";
import PostList from "@/components/post/postList";
export default {
  components: {
    CityList, //侧边栏列表组件
    PostList //文章列表组件
  },
  data() {
    return {
      recommend: ["广州", "上海", "北京"], //推荐城市名称
      citiesList: [], //热门城市数据
      postsData: {
        //文章数据
        data: []
      },
      copyPostsData: {
        //拷贝的文章数据
        data: []
      },
      // postsList:[],
      pageSize: 3, //页面显示的条数
      pageIndex: 1, //页面数
      searchText: "" //输入框的内容
    };
  },
  computed: {
    // 计算属性监听数据变化从而改变 渲染的文章列表数据
    postsList() {
      let start = (this.pageIndex - 1) * this.pageSize;
      let end = this.pageIndex * this.pageSize;
      return this.postsData.data.slice(start, end);
    }
  },
  mounted() {
    // 获取城市列表数据
    this.$axios({
      url: "/posts/cities"
    }).then(res => {
      this.citiesList = res.data.data;
    });
    // 获取文章列表数据
    this.$axios({
      url: "/posts"
    }).then(res => {
      this.postsData = res.data;
    });
  },
  methods: {
    handleSizeChange(pageSize) {
      // 页面条数变化
      this.pageSize = pageSize;
    },
    handleCurrentChange(pageIndex) {
      // 页面数据变化
      this.pageIndex = pageIndex;
    },
    handlePostsList(city) {
      // console.log(city);
      //改变文章
      if (city) {
        this.searchText = city;
      }
      this.getPostsData(this.searchText);
    },
    getPostsData(city) {
      //获取文章数据city城市名称或城市id
      this.$axios({
        url: "/posts",
        params: {
          city
        }
      }).then(res => {
        this.postsData = res.data;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 20px auto;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.post_right {
  .search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border: 2px solid #ffa500;
    padding: 16px;
    input {
      flex: 1;
      height: 35px;
      border: none;
      outline: none;
    }
    /deep/.el-icon-search {
      font-size: 24px;
      color: #ffa500;
    }
  }
  .text {
    margin: 10px 0;
    font-size: 12px;
    a {
      margin-left: 10px;
      &:hover {
        color: #ffa500;
        text-decoration: underline solid #ffa500;
      }
    }
  }
  .title {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    height: 40px;
    border-bottom: 1px solid #f3f3f3;
    h2 {
      color: #ffa500;
      height: 100%;
      font-size: 16px;
      font-weight: normal;
      border-bottom: 2px solid #fda90e;
    }
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      background-color: #409eff;
      color: #fff;
      font-size: 12px;
      border-radius: 5px;
    }
  }
}
</style> 